<page-header></page-header>

<!--<nz-card [nzTitle]="phActionTpl" [nzExtra]="search">-->

<div class="main">
    <nz-card [nzBordered]="false" nzSize="small">
        <ng-template #mt>

        </ng-template>
        <nz-button-group style="margin-bottom: 16px">
            <button nz-button nzType="link" (click)="addType()">添加</button>
            <a nz-popconfirm nzTitle="确认删除【{{selected?.text}}】分类并删除全部子菜单?" (nzOnConfirm)="delType()">删除</a>
            <!--      <button nz-button nzType="link" *ngIf="selectedId" (click)="delType()">删除分类</button>-->
        </nz-button-group>
        <div class="menu">
            <ul nz-menu [nzMode]="'inline'">
                <li *ngFor="let m of menuArray" nz-menu-item [nzSelected]="m.selected" (click)="to(m)">{{ m.text }}</li>
            </ul>
        </div>
    </nz-card>

    <div class="content">

        <nz-card [nzExtra]="search" [nzTitle]="phActionTpl" nzSize="small" [nzBordered]="false">
            <ng-template #search>
                <sf #sf
                        nz-col
                        mode="search"
                        [schema]="searchSchema"
                        (formSubmit)="onSearch($event)"
                        (formReset)="reload()"></sf>

            </ng-template>

            <ng-template #phActionTpl>
                <button nz-col nz-button (click)="addRoot()" nzType="link">添加菜单</button>
            </ng-template>
            <ng-container *ngIf="treeNodes as menus">
                <nz-table #table
                        [nzData]="menus"
                        [nzShowPagination]="false">
                    <thead>
                        <tr>
                            <!--        <th nzShowExpand></th>-->
                            <th nzWidth="240px">菜单名称</th>
                            <th nzWidth="300px">路径</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
                        <ng-template #tds
                                let-menu>

                            <!--        <ng-container *ngFor="let i of menu.level;let n=index">-->
                            <!--          <td>index</td>-->
                            <!--        </ng-container>-->
                            <td width="30"
                                    [nzIndentSize]="menu.level*20"
                                    [nzShowExpand]="menu.children.length > 0"
                                    [(nzExpand)]="menu.isExpanded"
                                    (nzExpandChange)="expandChange($event,menu)">{{ menu.origin.title }}</td>
                            <!--        <td [nzIndentSize]="menu.level*20">{{ menu.origin.title }}</td>-->
                            <td>{{ menu.origin.link }}</td>
                            <td>{{ menu.origin.createdDate }}</td>
                            <td>
                                <a (click)="edit(menu)">
                                    <i class="anticon anticon-edit"></i>
                                    编辑
                                </a>
                                <nz-divider nzType="vertical"></nz-divider>
                                <a nz-popconfirm
                                   nzTitle="确认删除菜单连同子菜单？"
                                        (nzOnConfirm)="delete(menu.origin)"><i class="anticon anticon-delete"></i>删除
                                </a>

                                <ng-container>
                                    <nz-divider nzType="vertical"></nz-divider>
                                    <a (click)="addChildren(menu)">
                                        <i class="anticon anticon-plus"></i>
                                        添加子菜单
                                    </a>
                                </ng-container>


                            </td>
                        </ng-template>

                        <ng-template #menuTpl
                                let-menus>
                            <ng-container *ngFor="let menu of menus">
                                <tr *ngIf="menu.level ===0">
                                    <ng-container *ngTemplateOutlet="tds;context: { $implicit: menu }"></ng-container>
                                </tr>
                                <tr *ngIf="menu.level > 0"
                                        [nzExpand]="menu.parentNode.isExpanded">
                                    <ng-container *ngTemplateOutlet="tds;context: { $implicit: menu }"></ng-container>
                                </tr>
                                <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
                            </ng-container>
                        </ng-template>
                    </tbody>
                </nz-table>
            </ng-container>
        </nz-card>
    </div>
</div>


<!--</nz-card>-->
